import React, { useState } from "react";
import "./index.scss";
import { Input, Button, Card } from "@hi-ui/hiui";
import CryptoJS from "crypto-js";

const prefix = "crypto";
function CryPto() {
  const cryptoUtil = (value, single) => {
    let valueMd5 = CryptoJS.MD5(value).toString();
    return single ? valueMd5 : CryptoJS.HmacMD5(value, single).toString();
  };
  const [value, setValue] = useState("");
  const [encryptionValue, setEncryptionValue] = useState("");
  const [single, setSingle] = useState("");
  return (
    <div className={`${prefix}`}>
      <Card title="MD5加密">
        <div className=" flex flex-row">
          <Input
            style={{ width: "300px" }}
            placeholder="请输入要加密的数据"
            value={value}
            onChange={(e) => {
              setValue(e.target.value);
              // setEncryptionValue(cryptoUtil(e.target.value, true));
            }}
          ></Input>
          <Input
            className="ml-2 mr-2"
            style={{ width: "300px" }}
            placeholder="请输入签名"
            value={single}
            onChange={(e) => {
              setSingle(e.target.value);
            }}
          ></Input>
          <Button
            type="primary"
            onClick={() => {
              setEncryptionValue(cryptoUtil(value, single));
            }}
          >
            加密
          </Button>
        </div>
        <div className="mt-3">加密后的数据:{encryptionValue}</div>
      </Card>
    </div>
  );
}
export default CryPto;
